<style lang="scss" scoped>
#list{
  padding-top: 1.95rem;
  p, span, input{
      font-family: Helvetica Neue,Tahoma,Arial;
  }
}
.list-box {
    position: relative;
    overflow: hidden;
    &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #bbb6b6;
        color: #bbb6b6;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    &:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        bottom: 0;
        border-left: 1px solid #bbb6b6;
        color: #bbb6b6;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
    }
    .li {
        width: 25%;
        position: relative;
        float: left;
        padding:0.6rem 0.5rem;
        list-style-type: none;
        box-sizing: border-box;
        text-align: center;
        &:before {
            content: " ";
            position: absolute;
            right: 0;
            top: 0;
            width: 1px;
            bottom: 0;
            border-right: 1px solid #bbb6b6;
            color: #bbb6b6;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
        }
        &:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #bbb6b6;
            color: #bbb6b6;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .img {
            width: 2rem;
            height: 2rem;
            margin: 0 auto;
            img {
              width: 2rem;
              height: 2rem;
                display: block;
                margin: 0 auto;
            }
        }
        .num{
          text-align: center;
          line-height: 1.2rem;
          font-size: 0.6rem;
        }
        .status{
          text-align: center;
          line-height: 1rem;
          font-size: 0.6rem;
        }
    }
    .li1{
      .status{
        color:#707070;
      }
    }
    .li2{
      .status{
        color:#e98f36;
      }
    }
    .li3{
      .status{
        color:#2aa515;
      }
    }
}

</style>

<template lang="html">

<div id="list">
    <head-top :head-title="'餐桌'"></head-top>
    <ul class="list-box">
        <li :class="'li li'+item.status" v-for="(item,index) in listDatas" :key="index" >
          <router-link :to="'/shop/'+(index+1)">
            <span class="img"><img v-show="item.status=='2'" src="../../assets/images/list2.png"></span>
            <span class="img"><img v-show="item.status=='1'" src="../../assets/images/list.png"></span>
            <span class="img"><img v-if="item.status=='3'" src="../../assets/images/list3.png"></span>
            <p class="num">{{item.name}}桌</p>
            <p class="status">{{item.status | filterStatus}}</p>
            </router-link>
        </li>
    </ul>
    <foot-guide></foot-guide>
</div>

</template>

<script>
import Vue from 'vue'

Vue.filter('filterStatus', function(value) {
    let reulst = ''
    switch (value) {
        case '1':
            reulst = '空桌'
            break;
        case '2':
            reulst = '用餐中'
            break;
        case '3':
            reulst = '已预订'
            break;
        default:
            break;
    }
    return reulst;
})
import headTop from '../../components/header/head'
import footGuide from '../../components/footer/footGuide'
export default {
    components: {
        headTop,
        footGuide
    },
    data() {
        return {
          listDatas: []
        }
    },
    created() {

    },
    async beforeMount() {

    },
    computed: {

    },
    mounted(){
        this.getDeskShopList()
    },
    methods: {
        getDeskShopList(){
          // let res = {
          //   "first": 1,
          //   "result": [
          //     {
          //       "name": "桌1",
          //       "scope": 10,
          //       "status": 1,
          //       "dnumber": 2,
          //       "id": 1
          //     },
          //     {
          //       "name": "桌2",
          //       "scope": 10,
          //       "status": 1,
          //       "dnumber": 7,
          //       "id": 2
          //     },
          //     {
          //       "name": "88",
          //       "scope": 7,
          //       "status": 1,
          //       "dnumber": 3,
          //       "id": 4
          //     },
          //     {
          //       "name": "44",
          //       "scope": 2,
          //       "status": 1,
          //       "dnumber": 4,
          //       "id": 5
          //     }
          //   ],
          //   "order": "asc",
          //   "autoCount": true,
          //   "pageSize": 10,
          //   "orderBySetted": true,
          //   "orderBy": "id",
          //   "pageNo": 1,
          //   "totalCount": 4,
          //   "totalPages": 1,
          //   "hasNext": false,
          //   "nextPage": 1,
          //   "hasPre": false,
          //   "prePage": 1
          // }



                this.$http.get(this.HttpUrl.UrlConfig.getDeskShopList)
                    .then(res => {
                        res = res.data

                        this.listDatas = res.result

                    }).catch(error => {
                        console.log(error)
                    })
        },
        mobileLogin() {

        }
    }
}

</script>
